<template>
	<view class="card">
		<view class="card-header" v-if="header">
			<view class="font">
				<text class="card-header-title font-weight-bold text-white">{{ header }}</text>
			</view>
		</view>
		<view class="card-content">
			<slot></slot>
		</view>
		<view class="card-footer" v-if="footer">
			<text class="card-footer-text">{{ footer }}</text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Card',
	props: {
		header: {
			type: String,
			default: ''
		},
		footer: {
			type: String,
			default: ''
		},
		collapse: {
			type: Object,
			default: () => {}
		}
	}
};
</script>

<style scoped>
.card {
	margin-top: 20rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	overflow: hidden;
	border: 1rpx solid #eaeaea;
}

.card-header {
	padding: 20rpx;
	border-bottom: 1rpx solid #eaeaea;
	background-color: #3c9cff;
}

.card-header-title {
	/* font-size: 32rpx;
	color: #333; */
}

.card-content {
	padding: 20rpx;
}

.card-footer {
	padding: 20rpx;
	border-top: 1rpx solid #eaeaea;
}

.card-footer-text {
	font-size: 28rpx;
	color: #666;
}
</style>
